.login-container {
  margin: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  // 背景色
  .noite {
    background: -webkit-linear-gradient(
      top,
      rgb(0, 0, 0) 50%,
      rgb(25, 19, 39) 80%,
      rgb(43, 32, 72)
    );
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }
  // 星星
  .constelacao {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    animation: rotate 600s infinite linear;
    .estrela {
      background-color: white;
      border-radius: 50%;
      position: absolute;
      animation-name: estrela;
      // animation-delay: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    .twinkle {
      animation-name: estrelaDestacada;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
  // 月亮
  .lua {
    position: absolute;
    right: 200px;
    top: 100px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff,
      0 0 8px 2px rgba(255, 255, 255, 0.26);
    background-color: #fff;
    animation-name: lua;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    .textura {
      background-image: url(../bgMoon.png);
      background-position: center;
      background-size: 100%;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      overflow: hidden;
      opacity: 0.4;
    }
  }
  // 流星
  .meteoro {
    position: absolute;
    background-color: #fff;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    transform: rotate(-35deg);
    // animation-name: meteoroStyle0;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .meteoroAnimation1 {
    animation-name: meteoroStyle1;
  }
  .meteoroAnimation2 {
    animation-name: meteoroStyle2;
  }
  .meteoroAnimation3 {
    animation-name: meteoroStyle3;
  }
  .meteoroAnimation0 {
    animation-name: meteoroStyle0;
  }
  .meteoro::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0;
    height: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 85px solid white;
    position: absolute;
    left: 2px;
    top: 0;
  }
  // 图片
  .floresta {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    img {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
// 动画
@keyframes escurecer {
  0% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

@keyframes estrela {
  0% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.4);
  }

  100% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }
}

@keyframes estrelaDestacada {
  0% {
    background-color: #ffffff;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);
  }

  20% {
    background-color: #ffc4c4;
    box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);
  }

  80% {
    background-color: #c4cfff;
    box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);
  }

  100% {
    background-color: #ffffff;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
  }
}

@keyframes meteoroStyle1 {
  0% {
    opacity: 0;
    right: 300px;
    top: 100px;
  }

  30% {
    opacity: 0.3;
  }

  60% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    right: 1000px;
    top: 600px;
  }
}

@keyframes meteoroStyle2 {
  0% {
    opacity: 0;
    right: 700px;
    top: 100px;
  }

  30% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 1400px;
    top: 600px;
  }
}

@keyframes meteoroStyle3 {
  0% {
    opacity: 0;
    right: 300px;
    top: 300px;
  }

  30% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 1000px;
    top: 800px;
  }
}

@keyframes meteoroStyle0 {
  0% {
    opacity: 0;
    right: 700px;
    top: 300px;
  }

  30% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 1400px;
    top: 800px;
  }
}

@keyframes lua {
  0% {
    box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff,
      0 0 8px 2px rgba(255, 255, 255, 0.26);
  }

  50% {
    box-shadow: 0 0 80px 0px #fff, 0 0 30px -4px #fff,
      0 0 8px 2px rgba(255, 255, 255, 0.26);
  }

  100% {
    box-shadow: 0 0 160px 0px #fff, 0 0 30px -4px #fff,
      0 0 8px 2px rgba(255, 255, 255, 0.26);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}